<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: zhangjx
 * @Date: 2023-06-01 16:25:51
 * @LastEditors: uphldjx 1373577124@qq.com
 * @LastEditTime: 2023-08-22 14:43:29
-->
<template>
	<template v-if="item.dicData && value">
		<span v-for="tag in dictTags" :key="tag.label">
			<el-tag v-if="value == tag.value" class="mx-1" :type="tag.type" :style="{ ...tag.style, border: 'none' }">
				{{ tag.label }}
			</el-tag>
		</span>
	</template>
	<el-tag v-else-if="value" class="mx-1" size="small" :type="item.tagType || 'info'" effect="plain">
		{{ value }}
	</el-tag>
	
  <span v-else>/</span>
</template>

<script setup lang="ts">
type Props = {
	value: any
	item?: any
}
const props = withDefaults(defineProps<Props>(), {})

const dictTags = computed(() => {
	return props.item.dicData?.map((item) => {
		let style = {}
		switch (item.type) {
			case 'success':
				style = {
					background: 'rgba(0, 168, 112, 0.2)',
					color: '#00A870',
				}
				break
			case 'info':
				style = {
					background: 'rgba(0, 0, 0, 0.9)',
					color: 'rgba(0, 0, 0, 1)',
				}
				break
			case 'primary':
				style = {
					background: 'rgba(105, 158, 245, 0.2)',
					color: '#699EF5',
				}
				break
			case 'danger':
				style = {
					background: 'rgba(250, 62, 62, 0.2)',
					color: '#FA3E3E',
				}
				break
			case 'warning':
				style = {
					background: 'rgba(237, 123, 47, 0.2)',
					color: '#ED7B2F',
				}
				break

			default:
				style = {
					background: 'rgba(105, 158, 245, 0.2)',
					color: '#699EF5',
				}
				break
		}
		return {
			...item,
			style,
		}
	})
})
</script>

<style scoped></style>
